<template>
	<view>
		<u-popup v-model="show" mode="bottom" :custom-style="{backgroundColor: 'rgba(0,0,0,0)'}" :mask-custom-style="maskCustomStyle"
			border-radius="24">
				<view class="flex-col section_3_s">
				    <view class="flex-col self-stretch group_s">
				      <text class="self-start text_s">选择账号</text>
				
				    </view>
				    <text class="self-start font_s text_2_s">未登录账号且登录时常不满24小时不可选择</text>
				    <view class="flex-col self-stretch group_2_s">
				      <view class="flex-row justify-between items-center section_4_s">
				        <view class="flex-row items-center" style="flex: 1;width: 100%;">
				          <image class="shrink-0 image_2_s" src="/static/image/haoduogeni/search-icon.png" />
				          <input style="width: 100%;" class="font_s ml-6-5" v-model="text"  type="text" placeholder="请输入昵称/手机号查询" />
				        </view>
				        <view @click="search" class="flex-col justify-start items-center text-wrapper_s"><text class="font_s text_3_s">查询</text></view>
				      </view>
				      <view class="flex-row justify-between items-center section_5_s mt-15-5">
				        <view class="flex-row flex-1">
				          <view class="flex-row justify-center" style="width: 80rpx;">
				            <text class="font_2_s">头像</text>
				          </view>
				          <view class="flex-1 justify-center">
				            <text class="font_2_s">昵称</text>
				          </view>
				          <view class="flex-row justify-center" style="width: 100rpx;">
				            <text class="font_2_s">状态</text>
				          </view>
				          <view class="flex-1 justify-center">
				            <text class="font_2_s">时长/时</text>
				          </view>
				          <!-- <text class="font_2 flex-1">昵称</text>
				          <text class="font_2 flex-1">状态</text>
				          <text class="font_2 flex-1">时长</text> -->
				          <view class="flex-row items-center justify-center" style="width: 120rpx;">
				            <text class="font_2_s">全选</text>
				            <!-- <view v-if="{{!isAll}}" class="shrink-0 section_6 view ml-7"></view> -->
				
				            <view v-if="isAllDisabled">
				              <image class="image-1_s ml-7" src="/static/image/haoduogeni/disabled-icon.png" mode="" />
				            </view>
				            <view @click="allSelect" v-if="!isAll && !isAllDisabled">
				              <image class="image-1_s ml-7" src="/static/image/haoduogeni/nocheck-icon1.png" mode="" />
				            </view>
				            <view @click="allSelect" v-if="isAll && !isAllDisabled">
				              <image class="image-1_s ml-7" src="/static/image/haoduogeni/fuxuan-cehecked.png" mode="" />
				            </view>
				          </view>
				        </view>
				
				      </view>
				    </view>
				    <scroll-view scroll-y style="max-height: 40vh;" @scrolltolower="loadMore" scroll-with-animation :scroll-top="scrollTop">
				
				      <view class="list-wrap_s">
				        <view @click="changeType(item,index)" v-for="(item,index) in list" :key="index" class="flex-row justify-between items-center self-stretch group_3_s" :class="index%2 == 0 ? 'view_2_s' : 'section_7_s'">
				          <!-- <view class="flex-row items-center flex-1"> -->
				            <view class="flex-row items-center justify-center" style="width: 80rpx;">
				              <image class="shrink-0 image_3_s" :src="replaceHttp(item.HeadUrl)" />
				            </view>
				            <view class="flex-row items-center flex-1 justify-center">
				              <text class="font_2_s flex-row justify-center" style="width: 100%;word-break: break-all;">{{item.NickName}}</text>
				            </view>
				            <view class="flex-row justify-center" style="width: 100rpx;">
				              <text class="font_2_s">{{item.is_login == 0 ? '未登录' : '已登录'}}</text>
				            </view>
				            <view class="flex-1 justify-center">
				              <text class="font_2_s">{{item.login_time}}</text>
				            </view>
				            
				            
				          <!-- </view> -->
				          <view style="width: 120rpx;display: flex;justify-content: flex-end;">
				            <view v-if="item.disabled">
				              <image class="image-1_s ml-7" src="/static/image/haoduogeni/disabled-icon.png" mode="" />
				            </view>
				            <view v-if="!item.checked && !item.disabled">
				              <image class="image-1_s ml-7" src="/static/image/haoduogeni/nocheck-icon1.png" mode="" />
				            </view>
				            <view v-if="item.checked && !item.disabled">
				              <image class="image-1_s" src="/static/image/haoduogeni/fuxuan-cehecked.png" mode="" />
				            </view>
				          </view>
				
				
				        </view>
				      </view>
				    </scroll-view>
				    <view class="flex-col self-stretch group_4_s">
				      <view class="flex-row section_8_s">
				        <view @click="popupSpecsbtn" class="flex-col justify-start items-center text-wrapper_2_s"><text class="font_3_s text_4_s">取消</text></view>
				        <view @click="submit" class="flex-col justify-start items-center text-wrapper_3_s ml-15">
				          <text class="font_3_s text_5_s">确定</text>
				        </view>
				      </view>
				    </view>
				  </view>
		</u-popup>
	</view>
</template>

<script>
	import {
		fabuWxUser
	} from '../../../haoduogeni/common/api/user';
	export default {
		props: {
			show: {
			        value: false,
			        type: Boolean
			    }
		},
		data() {
			return {
				maskCustomStyle: {
					background: 'rgba(0, 0, 0, 0.2)'
				},
				 page: 1,
				      row: 1000,
				       list: [],
				       isAll: false,//是否全选
				       isAllDisabled: false,//是否全部不可选
				       text: '',
				       last_page: 1,
			}
		},
		created() {
			this.getList();
		},
		methods: {
			replaceHttp(originalUrl){
				var secureUrl = originalUrl.replace('http://', 'https://');
				return secureUrl;
			},
			search(){
			        this.list = [];
			        this.getList();
			      },
			      loadMore() {
			        console.log('到底了')
			        if(this.page < this.last_page){
			          this.page++;
			          this.getList()
			        }else {
			          uni.showToast({
			            title: '已加载全部',
			            icon: 'none'
			          })
			        }
			      },
			      allSelect(){
			        if(this.isAll){
			          this.list.forEach(item => {
			            item.checked=false
			          })
			          this.isAll = false;
			        }else {
			          this.list.forEach(item => {
			            item.checked=item.disabled ? false :true
			          })
			          this.isAll = true;
			        }
			        console.log(this.list,'全选')
			      },
			      // changeText(e){
			      //   this.text = e.detail.value;
			      // },
			      getList() {
			        var _this = this;
			        fabuWxUser({
			          page: this.page,
			          row: this.row,
			          pt_id: this.$ptId,
			          uid: uni.getStorageSync('userId'),
			          text: this.text
			        }).then(res => {
			          //成功时回调函数
			          console.log(res, 'fabuWxUser')
			          if (res.errno == 0) {
			            var data = res.data.data;
			            var arr = data.map(item =>{
			              return {
			                ...item,
			                disabled: (item.is_login == 1 && parseFloat(item.login_time) > 24) ? false : true,
			                // disabled: item.is_login == 0 ? false : true,
			                checked: false
			              }
			            })
			            
			            
			            this.list = [...this.list,...arr];
			            this.last_page = res.data.last_page;
			            
			            const allDisabledValid = this.list.every(item => item.disabled == true);
			            if(allDisabledValid){
			              
							this.isAllDisabled = true;
			              
			            }else {
			            
			                this.isAllDisabled = false;
			            }
			            console.log(this.list,'listtttttttttt')
			          }
			        }).catch(err => {
			          //失败时回调函数
			          console.log(err)
			        })
			  
			      },
			      changeType(item,index){
			        if(item.disabled){
			          return
			        }
			        this.list[index].checked = !item.checked
			        console.log(this.list)
			        const allChecked = this.list.every(item => item.checked === true);
			        if(allChecked){
						this.isAll = true;
			        }else {
			         this.isAll = false;
			        }
			      },
			      popupSpecsbtn() {
			        this.$emit("closeShow");
			        this.show = false;
			      },
			      submit() {
			        console.log(this.list,'确定')
			        var arr = []
			        this.list.forEach(item => {
			          if(item.checked){
			            arr.push(item.id)
			          }
			        })
			        console.log(arr,'arrrrrr')
			        if(arr.length == 0){
			          uni.showToast({
			            title: '请选择账号',
			            icon: 'none'
			          })
			          return
			        }
			        // return
			        this.$emit("ok",arr);
			        // this.setData({
			        //     show: false
			        // });
			      },
		}
	}
</script>

<style lang="less" scoped>
	@import url("../../common/css/common.css");

.flex-1 {
  display: flex;
  flex: 1;
  width: 100%;
}
.ml-6-5 {
  margin-left: 13rpx;
}
.mt-15-5 {
  margin-top: 31rpx;
}
.ml-55-5 {
  margin-left: 111rpx;
}
.ml-7 {
  margin-left: 14rpx;
}
.ml-48-5 {
  margin-left: 97rpx;
}
.ml-15 {
  margin-left: 30rpx;
}
.section_3_s {
  padding-top: 40rpx;
  background-color: #ffffff;
  border-radius: 32rpx 32rpx 0rpx 0rpx;
}
.group_s {
  padding: 0 29rpx;
  height: 52rpx;
}
.text_s {
  margin-top: 20rpx;
  color: #000000;
  font-size: 34rpx;
  font-family: PingFang SC;
  line-height: 32rpx;
}
.image_s {
  margin-right: 11rpx;
  margin-top: -52rpx;
  width: 24rpx;
  height: 25rpx;
}
.font_s {
  font-size: 24rpx;
  font-family: PingFang SC;
  line-height: 23rpx;
  color: #aeaeae;
}
.text_2_s {
  margin-left: 28rpx;
  margin-top: 19rpx;
  font-weight: 300;
}
.group_2_s {
  margin-top: 29rpx;
  padding: 0 29rpx;
}
.section_4_s {
  padding-left: 22rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  border-left: solid 1rpx #dddddd;
  border-right: solid 1rpx #dddddd;
  border-top: solid 1rpx #dddddd;
  border-bottom: solid 1rpx #dddddd;
}
.image_2_s {
  width: 30rpx;
  height: 31rpx;
}
.text-wrapper_s {
  padding: 22rpx 0;
  background-image: linear-gradient(90deg, #00ceb8 0%, #0fcd99 100%);
  border-radius: 8rpx;
  width: 120rpx;
  height: 68rpx;
}
.text_3_s {
  color: #ffffff;
  font-weight: 500;
}
.section_5_s {
  /* padding: 23rpx 40rpx; */
  padding: 23rpx 0rpx;
  background-color: #f7f7f7;
}
.font_2_s {
  font-size: 26rpx;
  font-family: PingFang SC;
  /* line-height: 25rpx; */
  color: #000000;
}
.section_6_s {
  margin-right: 11rpx;
  background-color: #ffffff;
  border-radius: 4rpx;
  width: 34rpx;
  height: 34rpx;
  border-left: solid 1rpx #dddddd;
  border-right: solid 1rpx #dddddd;
  border-top: solid 1rpx #dddddd;
  border-bottom: solid 1rpx #dddddd;
}
.image-1_s {
  width: 36rpx;
  height: 36rpx;
  margin-right: 11rpx;
}
.view_s {
  margin-right: 0;
}
.group_3_s {
  padding: 0 29rpx;
}
.view_2_s {
  margin-top: 17rpx;
}
.image_3_s {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
}
.section_7_s {
  padding: 17rpx 0rpx;
  background-color: #f7f7f7;
  margin: 0 30rpx;
}
.view_3_s {
  margin: 17rpx 30rpx 0;
}
.view_4_s {
  margin-top: 18rpx;
}
.group_4_s {
  margin-top: 17rpx;
}
.view_5_s {
  margin: 0 30rpx;
}
.section_8_s {
  padding: 40rpx 30rpx;
  background-color: #ffffff;
  box-shadow: 0rpx -4rpx 24.04rpx 2.98rpx #d4d4d430;
}
.text-wrapper_2_s {
  padding: 30rpx 0;
  flex: 1 1 330rpx;
  background-color: #effaf8;
  border-radius: 44rpx;
  height: 88rpx;
}
.font_3_s {
  font-size: 30rpx;
  font-family: PingFang SC;
  line-height: 28rpx;
}
.text_4_s {
  color: #009d67;
}
.text-wrapper_3_s {
  padding: 30rpx 0;
  flex: 1 1 330rpx;
  background-image: linear-gradient(90deg, #00ceb8 0%, #0fcd99 100%);
  border-radius: 44rpx;
  height: 88rpx;
}
.text_5_s {
  color: #ffffff;
}

.list-wrap_s {
  max-height: 30vh;
  overflow-y: scroll;
}

</style>
